<template>
  <div id="app">
    <div class="calender-class">
      <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell"
                  slot-scope="{ date, data }">
          <div class="day-content-class">
            <template v-if="viewDate[data.day]">
              <div class="header-class">
                <div class="day-class">
                  {{
						data.day
						  .split("-")
						  .slice(1)
						  .join("-")
					  }}
                </div>
              </div>
              <div class="paiban-class">
                <div v-for="(dayValue, i) in viewDate[data.day]"
                     :key="i"
                     :class="[
						'draggable-div' + i,
						'each-paiban-class',
						setWorkClass(dayValue.sort),
					  ]"
                     draggable="true"
                     @dragstart="handleDragStart($event, dayValue, data.day)"
                     @dragover.prevent="handleDragOver($event)"
                     @dragenter="handleDragEnter($event, dayValue)"
                     @dragend="handleDragEnd()">
                  <i :class="[
						  setIconClass(dayValue.shiftName),
						  'paiban-icon-class',
						]"></i>
                  <div class="paiban-name-class">{{ dayValue.groupName }} </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="header-class">
                <div class="day-class">
                  {{
						data.day
						  .split("-")
						  .slice(1)
						  .join("-")
					  }}
                </div>
              </div>
              <div class="no-work-class">
                <div class="icon-class"><i class="el-icon-date"></i></div>
                <div class="tips-class">
                  暂无排班
                </div>
              </div>
            </template>
          </div>
        </template>
      </el-calendar>
    </div>

  </div>
</template>
	 
<script>
import schedulingApi from '@/api/scheduling'
import { getInfo } from '@/api/user'
import { getToken } from '@/utils/auth'

export default {
  data () {
    return {
      viewDate: {},
      thisDay: null,
      thisDayWork: null,
      ending: null,
      dragging: null,

      drawer: false,
      innerDrawer: false,
      hanleDay: "",
      workInfoList: [],

      //   早中晚班阶段
      Time: ["8:00", "16:00", "00:00", "8:00"],
      //   所有人名字
      allName: []
    };
  },
  computed: {},
  mounted () {
    this.getSchedulingrById()
  },
  methods: {
    // 查询用户
    getSchedulingrById () {
      getInfo(getToken()).then(res => {
        schedulingApi.getSchedulingrById(res.data.userid).then(res => {
          this.viewDate = res.data
        })
      })

    },

    handleDragStart (e, item, thisDay) {
      this.dragging = item;
      this.thisDay = thisDay;
      this.thisDayWork = this.viewDate[thisDay];
    },
    handleDragEnd () {
      if (this.ending.id === this.dragging.id) {
        return;
      }
      let newItems = [...this.thisDayWork];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(this.ending);
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
      this.$set(this.viewDate, this.thisDay, newItems);
      this.$nextTick(() => {
        this.dragging = null;
        this.ending = null;
      });
      console.log(
        "🚀 ~ file: App.vue:286 ~ handleDragEnd ~ this.viewDate:",
        this.viewDate
      );
    },
    handleDragOver (e) {
      // 首先把div变成可以放置的元素，即重写dragenter/dragover
      e.dataTransfer.dropEffect = "move"; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter (e, item) {
      e.dataTransfer.effectAllowed = "move"; // 为需要移动的元素设置dragstart事件
      this.ending = item;
    },
    setWorkClass (value) {
      let classValue = "no-work-class";
      switch (value) {
        case 1:
          classValue = "zao-work-class";
          break;
        case 2:
          classValue = "wan-work-class";
          break;
        case 3:
          classValue = "ye-work-class";
          break;
        default:
          break;
      }
      return classValue;
    },
    setIconClass (value) {
      let classValue = "el-icon-sunrise-1";
      switch (value) {
        case "早":
          classValue = "el-icon-sunrise-1";
          break;
        case "中":
          classValue = "el-icon-sunny";
          break;
        case "晚":
          classValue = "el-icon-moon";
          break;
        default:
          break;
      }
      return classValue;
    },


  }
}
	</script>
	 
	<style>
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-table__fixed-right {
  height: 100% !important;
}

.calender-class {
  width: 100%;
  height: 100%;
}

.is-selected {
  color: #1989fa;
}

.el-calendar__body {
  height: 85vh;
}

.el-calendar-table {
  height: 100%;
}

.el-calendar-day {
  height: 100% !important;
}

.day-content-class {
  height: 100px;
  display: flex;
  flex-direction: column;
}

.header-class {
  flex: 1;
  display: flex;
  height: 28px;
  flex-direction: row;
  justify-content: space-between;
}

.day-class {
  flex: 4;
}

.handle-class {
  flex: 1;
}

.paiban-class {
  flex: 4;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.paiban-icon-class {
  font-size: 22px;
  margin: 8px 0 10px 0;
}

.paiban-name-class {
  padding-top: 10px;
}

.each-paiban-class {
  text-align: center;
  max-width: 50px;
  margin: 5px 5px 0 5px;
  border-radius: 5px;
  padding: 0 0 5px 0;
  flex: 1;
}

.zao-work-class {
  background-color: #d9ffd9;
  color: #11be11;
}

.wan-work-class {
  background-color: #fff0bd;
  color: #fccb2c;
}

.ye-work-class {
  background-color: #ddeffb;
  color: #2dabff;
}

.no-work-class {
  text-align: center;
  color: #cacaca;
}

.icon-class {
  font-size: 20px;
  margin-bottom: 20px;
}

/* 侧边弹窗 */
.add-btn-class {
  margin: 10px;
  float: right;
}

.change-date-drawer-class .el-calendar__body {
  height: 45%;
}

.change-date-drawer-class .day-content-class {
  height: 30px;
}

.disabled-date-class {
  color: #ccc;
  pointer-events: none;
}
</style>